<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        form {
            width: 500px;
            margin: 100px auto;
        }
        input[type='text'] {
            width: 500px;
            height: 40px;
            font-size: 20px;
        }
        input[type='checkbox'] {
            width: 40px;
            height: 40px;
            vertical-align: middle;
        }

        select {
            width: 120px;
            height: 40px;
        }
    </style>
</head>
<body>

    <form action="">
        <div>
            <input type="text" placeholder="请输入" value="一句话">
        </div>
        
        <div>
          <input type="checkbox" checked>: 看需求 <br>
          <input type="checkbox" >: 敲代码  <br>
          <input type="checkbox" >: 搞测试 <br>
          <input type="checkbox" >: 运营推广 
        </div>

        <select id="demo">
            <option value="" disabled>请选择</option>
            <option value="北京">北京市</option>
            <option value="上海" selected>上海市</option>
            <option value="广州">广州市</option>
        </select>

    </form>

    <script>
        // 获取当前的文本输入框标签
        var inp = document.querySelector("input[type='text']")
        // 获取输入框的文本
        console.log(inp.value);// 一句话
        console.log(inp.value.length);// 3  如果length属性为0,就代表输入框没有值  
        // 备注：如果想获取输入变化之后的值，需结合事件才有获取

        // 获取页面所有的复选框
        var aCheckBox = document.querySelectorAll("input[type='checkbox']");

        // 检查复选框的状态
        console.log(aCheckBox[0].checked );// true
        console.log(aCheckBox[1].checked );// false

        aCheckBox[2].checked= true; // 设置复选框状态为选中
        aCheckBox[3].checked= true; // 设置复选框状态为选中

        // 获取下拉标签的值
        var select = document.querySelector("#demo");
        console.log(select.value);// 上海


    </script>
</body>
</html>